// 函数组件
import React, { useState, useEffect, useContext } from "react";
import {
  Input,
  Select,
  DatePicker,
  Table,
  Switch,
  Modal,
  message,
  ConfigProvider,
  Card,
  List,
} from "antd";
import type { TableRowSelection } from "antd/es/table/interface";
import type { ColumnsType } from "antd/es/table";
import TagDialog from "../operations/child/TagDialog";
import zh_CN from "antd/es/locale/zh_CN";

import "../../css/public.less";
import "./userCss/UserLabel.less";

function UserLabel() {
  interface DataType {
    order: number;
    user_name: string;
    user_account: string;
    user_phone: number;
    reg_time: string;
    user_buy_money: number;
    status: boolean;
  }

  let flag;
  // 表格列
  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "order",
      width: "7%",
      align: "center",
    },
    {
      title: "用户昵称",
      dataIndex: "user_name",
      align: "center",
    },
    {
      title: "用户账号",
      dataIndex: "user_account",
      align: "center",
    },
    {
      title: "手机号",
      dataIndex: "user_phone",
      align: "center",
    },
    {
      title: "注册时间",
      dataIndex: "reg_time",
      align: "center",
    },
    {
      title: "消费金额",
      dataIndex: "user_buy_money",
      align: "center",
    },
    {
      title: "用户可用状态",
      dataIndex: flag,
      align: "center",
      render: (value, record, index) => {
        return <Switch checked={value} />;
      },
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      width: "20%",
      render: (value, record) => (
        <div>
          {/* <button className='edit' onClick={() => clickMod(record)}>查看</button> */}
          <button className="one"> 查看</button>
          <button className="edit">编辑</button>
          <button className="del">删除</button>
        </div>
      ),
    },
  ];
  // 表格数据
  const data: DataType[] = [];
  for (let i = 0; i < 46; i++) {
    let flag = i % 2 === 0 ? true : false;
    data.push({
      order: i,
      user_name: "张三",
      user_account: "1234567876234",
      user_phone: 13564766547,
      reg_time: "2023-01-12",
      user_buy_money: 200,
      status: flag,
    });
  }

  const rowSelection: TableRowSelection<DataType> = {
    // selectedRowKeys,
    // onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: "odd",
        text: "Select Odd Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          // setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: "even",
        text: "Select Even Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          // setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  return (
    // <div className='UserLabel'>
    //     用户标签
    // </div>

    <div className="UserLabel">
      {/* 头部 */}
      <div className="page-top">
        {/* 左边标题 */}
        <div className="page-title">
          <p>标签列表</p>
        </div>
      </div>

      <div className="page-context">
        {/* 表格部分 */}
        <div className="data-list">
        <p className="data-list-text">数据列表</p>
          {/* 表格部分 */}
          <ConfigProvider locale={zh_CN}>
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={data}
              scroll={{ y: 270 }}
              rowKey={(item) => item.order}
              pagination={{
                position: ["bottomCenter"],
                defaultPageSize: 10,
                pageSizeOptions: [3, 5, 10, 15],
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          </ConfigProvider>
        </div>
      </div>
    </div>
  );
}

export default UserLabel;
